<template>
  <section>
    <div class="warp1">
      <ul class="item">
        <li>
          <div class="item-div" style="padding: 15px; margin: 0px;">
            <span class="title">客户端名称</span>
            <span class="date">客户端编号</span>
            <span class="date1">联系方式</span>
          </div>
        </li>
      </ul>
    </div>
    <vue-seamless-scroll :data="list" class="warp" :class-option="classOption">
      <ul class="item">
        <li v-for="(item, index) in list" :key="index">
          <div class="item-div" style="padding: 15px; margin: 0px;">
            <span class="title" v-text="item.clientName"></span>
            <span class="date" v-text="item.clientCode"></span>
            <span class="date1" v-text="item.contact"></span>
          </div>
        </li>
      </ul>
    </vue-seamless-scroll>
  </section>
</template>
<script>
export default {
  data() {
    return {
      list: [],
      classOption: {
        direction: 0,
        step: 0.1,
        limitMoveNum: 5,  // 优化滚动效果
        singleHeight: 54,  // 根据实际行高设置
        waitTime: 200     // 滚动间隔时间
      }
    }
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      // 生成20条客户端模拟数据
      const industrys = ['科技', '金融', '医疗', '教育', '物流', '零售'];
      const companyTypes = ['有限公司', '集团', '研究院', '中心', '国际机构'];

      this.list = Array.from({ length: 20 }, (_, i) => {
        const industry = industrys[i % industrys.length];
        const type = companyTypes[i % companyTypes.length];

        return {
          clientName: `${industry}领域${['智慧', '创新', '数字', '智能'][i % 4]}${type}`,
          clientCode: `CLIENT-2024-${String(i + 1).padStart(4, '0')}`,
          contact: this.generateContact(i)
        }
      });
    },

    generateContact(index) {
      // 混合生成电话和邮箱
      if (index % 3 === 0) {
        const prefix = ['139', '138', '136', '188', '199'];
        return `${prefix[index % 5]}****${String(index).padStart(4, '0')}`;
      } else {
        const domain = ['tech', 'finance', 'med', 'edu'][index % 4];
        return `service@${domain}group.com`;
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.warp1 {
  height: 100px;
  width: 100%;
  overflow: hidden;

  ul {
    list-style: none;
    padding: 0;
    margin: 0 auto;

    li {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .item-div {
        display: flex;
        align-items: flex-start;
        width: 100%;
        color: #606266;
        font-size: 14px;
        border-bottom: 1px solid #e5e1e1;

        /* 将 #000000 替换为你想要的颜色 */
        .title {
          flex: 1;
        }

        .date {
          margin-left: 10px;
          text-align: left;
        }

        .date1 {
          width: 80px;
          margin-left: 60px;
          text-align: center;
        }
      }
    }
  }
}

.warp {
  height: 180px;
  width: 100%;
  margin: 0 auto;
  // margin-top: 20px;
  overflow: hidden;

  ul {
    list-style: none;
    padding: 0;
    margin: 0 auto;

    li {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .item-div {
        display: flex;
        align-items: flex-start;
        width: 100%;
        color: #606266;
        font-size: 14px;
        border-bottom: 1px solid #e5e1e1;

        /* 将 #000000 替换为你想要的颜色 */
        .title {
          flex: 1;
        }

        .date {
          margin-left: 10px;
          text-align: left;
        }

        .date1 {
          width: 80px;

          margin-left: 60px;
          text-align: left;
        }
      }
    }
  }
}
</style>
